<template>
	<view>
		<view hover-class="session-item-hover" :class="item.top" class="session-item">
			<image class="session-avatar" :class="item.avatar_gray" :src="item.avatar" mode="aspectFill"></image>
			<view class="session-info-right">
				<view class="session-info-item">
					<view class="session-info-name">{{item.nickname}}
						<u-tag style="margin-left: 16rpx;" :show="item.job==2" size='mini' color='#6EC9E1'
							border-color='#6EC9E1' text="有证" />
					</view>
					<view class="session-info-time im-color-gray">{{item.last_time}}</view>
				</view>
				<view class="session-info-item">
					<view class="session-last-message">
						<text class="session-user-status">{{(item.user_status ? item.user_status:'')}}</text>
						<text v-if="item.gzh">蓝天白云下，第一个，关注回访的生活咨询平台！</text>
						<text v-if="item.unread_fixed_msg" class="unread_fixed_msg">[{{item.unread_fixed_msg}}]</text>
						{{pattern.test(item.last_message)?'【链接】':item.last_message}}
					</view>
					<view class="session-unread-count" v-if="item.unreadMessagesNumber > 0"
						:class="item.shield ? 'session-shield':''">{{item.unreadMessagesNumber}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "session",
		props: {
			item: {
				type: Object,
				required: true
			}
		},
		data() {
			return {
				pattern: /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&amp;//=]*)/
			};
		},
		watch: {
			item: {
				// 每个属性值发生变化就会调用这个函数
				handler(newVal, oldVal) {
					// console.log('item:', newVal)
				},
				// 立即处理 进入页面就触发
				immediate: true,
				// 深度监听 属性的变化
				deep: true
			}
		},

	}
</script>

<style lang="scss">
	.session-item {
		padding: 24rpx 4%;
		display: flex;
		align-items: center;
		overflow: hidden;
	}

	.session-avatar {
		height: 100rpx;
		width: 100rpx;
		border-radius: 16rpx;
	}

	.session-info-right {
		margin-left: 20rpx;
		flex: 1;
		overflow: hidden;
	}

	.session-info-item {
		display: flex;
		height: 48rpx;
		line-height: 48rpx;
		justify-content: space-between;
	}

	.session-info-name {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		max-width: 400rpx;
	}

	.session-info-time {
		overflow: hidden;
		white-space: nowrap;
		max-width: 180rpx;
		font-size: 12px;
	}

	.im-color-gray {
		color: $--gray !important;
	}

	.session-last-message {
		font-size: small;
		color: $--gray;
		display: inline-block;
		width: 80%;
		overflow: hidden;
		white-space: nowrap;
		vertical-align: middle;
		text-overflow: ellipsis;
	}

	.session-unread-count {
		height: 34rpx;
		margin-top: 3rpx;
		padding: 0 10rpx;
		background: $--red;
		text-align: center;
		line-height: 34rpx;
		border-radius: 50%;
		color: $--white;
	}

	.im-img-gray {
		-webkit-filter: grayscale(50%);
		-moz-filter: grayscale(50%);
		-ms-filter: grayscale(50%);
		-o-filter: grayscale(50%);
		filter: grayscale(50%);
		filter: contrast(30%);
		filter: gray;
	}

	.session-shield {
		background: #D0CFD1 !important;
	}

	.session-top {
		background: #F8F9F9 !important;
	}

	.session-item-hover {
		background: #EDEDED !important;
	}

	.unread_fixed_msg {
		color: $--blue;
	}
</style>